<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:事件修饰符</title>
		<style>
			#div {
				background-color: red;
				width: 300px;
				height: 300px;
			}
		</style>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			<!--<form action="http://www.baidu.com" method="post" onsubmit="return checkForm()">
				<input type="submit" value="提交">
			</form>-->

			<form @submit.prevent action="https://www.baidu.com" method="post">
				<input type="submit" value="提交">
			</form>
			<hr/>
			<div @mouseover="fun1" id="div">
				<textarea  @mouseover.stop="fun2($event)">这是一个文件域</textarea>
			</div>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			methods:{
				fun1:function () {
					alert("鼠标悬停到了div上");
				},
				fun2:function (event) {
					alert("鼠标悬停到了testarea上了");
				}
			}
		});


		
		//传统js方式
		function checkForm() {
			alert(1);
			//表单验证必须有一个明确的boolean类型的返回值
			//在应用验证方法时必须加上 return 方法名称
			return false;

		}
	</script>

</html>